*{
    /*初始化 清除页面元素的内外边距*/
    padding: 0;
    margin: 0;
}

.container{
    /* 弹性布局 让页面元素垂直+水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 让子元素垂直排列 */
    flex-direction: column;

    /* 宽度占浏览器可视窗口总宽度 高度占浏览器可视区域总高度 */
    width: 100vm;
    height: 100vh;
    background-color: #000;
}

.container a{
    /* 相对定位 */
    position: relative;
    /* 将a这个行内元素转为块级元素，不然无法设置宽和高 */
    display:block;
    width: 140px;
    height: 60px;
    /* 行高 */
    line-height: 60px;
    text-align: center;
    margin: 40px;
    color:aqua;
    font-size: 20px;
    /* 取消下划线 */
    text-decoration: none;
    /* 加一下一些过渡事件 */
    transition: all 0.3s ease-in-out;
    /* 改变各个元素的颜色，一句话搞定 */
    /* hue-rotate是颜色滤镜 可以加不同的度数来改变颜色
    使用calc自动计算的方法，还有var函数来调用我们给每一个a设置的不同属性值1~5 
    然后分别乘60度，就可以得到不同的度数*/
    filter:hue-rotate(calc(var(--i) * 60deg));
}


.container a::before,
.container a::after{
    /* 将两个伪元素的相同部分写在一起 */
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border:2px solid aqua;
    /* 最后一个.3s是延迟时间 */
    transition: all 0.3s ease-in-out 0.3s;
}

.container a::before{
    top: 0;
    left: 0;
    /* 删除左边伪元素的右和下边框 */
    border-right: 0;
    border-bottom: 0;
}

.container a::after{
    right:0;
    bottom:0;
    /* 删除右边伪元素的左和上 */
    border-left: 0;
    border-top: 0;
}

.container a:hover{
    background-color: aqua;
    color:#000;
    /* 加个发光效果和下面的倒影 */
    box-shadow: 0 0 50px aqua; 
    /* below 是下倒影 1px是倒影的元素相隔的距离 最后是个渐变的颜色 */
    -webkit-box-reflect: below 1px linear-gradient(transparent,rgba(0,0,0,0.3));
    /* 设置一下以上属性的延迟时间 */
    transition-delay: 0.4s;
}

/* 再设置两条线的变化 总体来说四条各个方向的 只需要改变一下两个伪元素的宽度和高度 */
.container a:hover::before,
.container a:hover::after{
    width: 138px;
    height: 58px;
    transition-delay: 0s;
}